<template>
  <div>
   <nav-bar :title="title"></nav-bar>
   <div class="userBox">
      <div class="logoBox">
        <img class="logo" src="../../assets/images/logo.png" alt="">
      </div>
      <input-icon type="text" icon="phone" :placeholder="$t('user.telephone')" maxlength="11" v-model="phone"></input-icon>
      <input-icon icon="smsCode" :placeholder="$t('user.smsCode')" type="number" v-model="smsCode">
        <span class="smsCode" @click="getSmsCode" v-if="disabledCodeBtn">
          {{$t('user.getSmsCode')}}
        </span>
        <span v-else>{{count}}s</span>
      </input-icon>
      <input-icon maxlength="15" :type="type" icon="password" :placeholder="$t('user.password')" :iconRight="iconRight" v-model="pwd" @updateIcon="updateIcon"></input-icon>
      <input-icon type="password" icon="password" :placeholder="$t('user.password')" iconRight="iconClose" v-model="rePwd"></input-icon>
      <van-button :class="phone === '' || smsCode === '' || pwd === '' || rePwd === '' ? 'van-buttons' : 'van-button'" class="userBoxBth" round block type="info" native-type="submit" @click="onSubmit">
        <van-loading type="spinner" v-if="loading" />
        <span v-else>{{$t('user.confirm')}}</span>
      </van-button>
   </div>
  </div>
</template>

<script>
  import userApi from '../../api/userAPI.js'
  import inputIcon from '../../components/InputIcon.vue'
  export default {
    components:{
      inputIcon
    },
    data() {
        return {
          disabledCodeBtn: true,
          loading: false,
          type: 'password',
          title: '忘记密码',
          iconRight: 'eyeOpen',
          phone: '',
          smsCode: '',
          pwd: '',
          rePwd:　'',
          timer: '',
          count: 0
        };
      },
      methods: {
        // 倒计时方法
        countDown (time) {
          if (time === 0) {
            this.disabledCodeBtn = true
            this.codeText = "获取验证码"
            return
          } else {
            this.disabledCodeBtn = false;
            this.codeText = time + 's'
            time--
          }
          setTimeout(()=> {
            this.countDown(time)
          }, 1000)
        },
        // 获取验证码
        getSmsCode() {
          if (this.phone === '') {
            this.$toast.fail('手机号不能为空')
          } else {
            const TIME_COUNT = 60;
            if (!this.timer) {
             this.count = TIME_COUNT;
             this.disabledCodeBtn = false;
             this.timer = setInterval(() => {
             if (this.count > 0 && this.count <= TIME_COUNT) {
               this.count--;
              } else {
               this.disabledCodeBtn = true;
               clearInterval(this.timer);
               this.timer = null;
              }
             }, 1000)
            }
            userApi.getCode(this.phone)
          }
        },
        // 点击眼睛icon改变明文密文
        updateIcon(iconType) {
          this.pwd = this.pwd
          if (iconType === 'eyeOpen') {
            this.type = 'text'
            this.iconRight = 'eyeClose'
          } else {
            this.type = 'password'
            this.iconRight = 'eyeOpen'
          }
        },
        // 提交表单
        onSubmit() {
          if (this.phone === '') {
            this.$toast.fail('手机号不能为空');
            return
          }
          if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
            this.$toast.fail('手机号格式不正确');
            return
          }
          if (this.pwd === '') {
            this.$toast.fail('新密码不能为空');
            return
          }
          if (this.rePwd === '') {
            this.$toast.fail('新密码确认不能为空');
            return
          }
          if (!(/^[A-Za-z0-9]{6,15}$/.test(this.pwd))) {
            this.$toast.fail('请输入6-15位数字或字母');
            return
          }
          if (this.rePwd !== this.pwd) {
            this.$toast.fail('两次密码不一致');
            return
          }
          if (this.smsCode === '') {
            this.$toast.fail('验证码不能为空');
            return
          }
          this.loading = true
          userApi.forgetPwd(this.phone, this.smsCode, this.pwd).then(res => {
            localStorage.setItem('userName', res.userName)
            this.$router.push({
              path: '/'
            })
          }).catch(err => {
            this.$toast.error(err)
          }).finally(() => {
            this.loading = false
          })
        },
      }
  }
</script>

<style scoped lang="scss">
.navBar{
  border-bottom: 0.0625rem solid #E5E5E5;
}
</style>
